<template>
  <div >
    <el-divider>指标项</el-divider>
    <div class="reg-item" :key="item.id" v-for="(item,index) in config.indicator" >
        <el-form-item label="指标名称" style="margin-bottom:8px;" >
          <el-input v-model="item.name"></el-input>
        </el-form-item>
        <el-form-item label="指标数值" style="margin-bottom:0;" >
          <el-input-number v-model="item.max"
            controls-position="right"
            placeholder="请输入"></el-input-number>
        </el-form-item>
        <el-button title="删除"
                    @click="handleRemoveCol(index)"
                    class="reg-item-delete"
                    circle
                    plain
                    size="mini"
                    type="danger">
            <i class="el-icon-close"></i>
        </el-button>
    </div>
    <div class="mt-8" >
        <el-button class="ml-8" type="primary" size="mini" @click="handleAddCol" >添加指标</el-button>
    </div>
  </div>
</template>
<script>
export default {
    props: ['data'],
    data () {
        return {
        }
    },
    computed:{
        config(){
          return this.data
        }
    },
    methods:{
      handleAddCol(){
          this.config.indicator.push({
              id:this.$uuid(),
              name:`指标${this.config.indicator.length + 1}`,
              max:1000,
          })
      },
      handleRemoveCol(index){
          this.config.indicator.splice(index,1)
      }
    }
}
</script>

